<template>
  <div>
    <el-drawer
      title="优惠券自助核销码"
      :visible="hexiaoSelfDialog"
      direction="rtl"
      :before-close="handleClose"
      custom-class="demo-drawer"
      size="40%"
    >
      <el-form ref="queryForm" :inline="true" style="padding-left: 20px">
        <el-form-item label="请选择归属油站">
          <el-select
            style="width: 100%"
            v-model="stationId"
            :clearable="true"
            filterable
            placeholder="请选择油站名称"
            size="small"
          >
            <el-option
              v-for="item in stationList"
              :key="item.stationId"
              :label="item.stationName"
              :value="item.stationId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 二维码展示区 -->
      <div class="scan" v-if="stationId">
        <el-row>
          <el-col :span="12">
            <couponQr type="100" name="通用优惠券" :url="url"></couponQr>
          </el-col>
          <el-col :span="12">
            <couponQr type="4" name="洗车券" :url="url"></couponQr>
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col :span="12">
            <couponQr type="1" name="现金优惠券" :url="url"></couponQr>
          </el-col>
          <el-col :span="12">
            <couponQr type="2" name="折扣优惠券" :url="url"></couponQr>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import couponQr from "@/components/QrCode/authHexiaoCoupon_qr";
import settings from "@/settings";
import { listEnterpriseStation } from "@/api/dept";
export default {
  name: "Coupon_HeXiao_self",
  components: { couponQr },
  props: {
    hexiaoSelfDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      url: "",
      stationList: [],
      stationId: "",
      oldStationId: "",
    };
  },
  watch: {
    hexiaoSelfDialog(val) {
      if (val) {
        if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
          this.getStationList(this.presentEnterprise.enterpriseId);
        }
      }
    },
    stationId(val) {
      if (val) {
        let currentUrl = window.location.origin;
        let baseURL = "";
        switch (currentUrl) {
          case "https://yftx.xailife.com":
            baseURL = settings.baseURL;
            break;
          case "https://yftx-test.xailife.com":
            baseURL = settings.baseTestURL;
            break;
          case "https://yftx-test.xailife.com":
            baseURL = settings.baseDevURL;
            break;
          case "https://zh-admin.91cheyibao.com":
            baseURL = settings.baseCheyibaoURL;
            break;
          default:
            baseURL = settings.baseDevURL;
            break;
        }
        this.url = `${baseURL}/${this.presentEnterprise.enterpriseId}/coupon/autoHexiao_index?stationId=${this.stationId}&couponType=`;
      }
    },
  },
  methods: {
    handleClose() {
      this.stationId = "";
      this.$emit("update:hexiaoSelfDialog", false);
    },
    // 获取油站列表
    async getStationList(val) {
      const res = await listEnterpriseStation({ enterpriseId: val });
      this.stationList = res;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .demo-drawer {
  overflow-y: auto;
  .el-drawer__header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
  }
  .el-drawer__body {
    padding: 20px;

    .scan {
      .el-row {
        display: flex;
        text-align: center;
      }
      div {
        width: 250px;
      }
    }
  }
}
</style>
